<script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js"></script>

<script defer>
/**
  Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
  and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
*/

$(function() {

const IMG_SCOPE = 'main > article';

if ($(`${IMG_SCOPE} img`).length <= 0 ) {
  return;
}

/* lazy loading */

const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
const observer = lozad(imgList);
observer.observe();

/* popup */

$(`${IMG_SCOPE} p > img[data-src],${IMG_SCOPE} img[data-src].preview-img`).each(
  function() {
    let nextTag = $(this).next();
    const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : '';
    const src = $(this).attr('data-src');

    $(this).wrap(`<a href="${src}" title="${title}" class="popup"></a>`);
  }
);

$('.popup').magnificPopup({
  type: 'image',
  closeOnContentClick: true,
  showCloseBtn: false,
  zoom: {
    enabled: true,
    duration: 300,
    easing: 'ease-in-out'
  }
});

/* markup the image links */

$(`${IMG_SCOPE} a`).has('img').addClass('img-link');

});
</script>